<template>
  <div class="management">
    <h2>活动管理</h2>
    
    <div class="action-buttons">
      <button @click="showAddForm = true">添加活动</button>
    </div>
    
    <!-- 添加活动表单 -->
    <div v-if="showAddForm" class="form-container">
      <h3>添加新活动</h3>
      <form @submit.prevent="addActivity">
        <div>
          <label>标题:</label>
          <input v-model="newActivity.title" required>
        </div>
        <div>
          <label>描述:</label>
          <textarea v-model="newActivity.description" required></textarea>
        </div>
        <div>
          <label>日期:</label>
          <input v-model="newActivity.date" type="date" required>
        </div>
        <div>
          <label>地点:</label>
          <input v-model="newActivity.location" required>
        </div>
        <button type="submit">保存</button>
        <button type="button" @click="cancelAdd">取消</button>
      </form>
    </div>
    
    <!-- 活动列表表格 -->
    <table>
      <thead>
        <tr>
          <th>标题</th>
          <th>日期</th>
          <th>地点</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="activity in activities" :key="activity.id">
          <td>{{ activity.title }}</td>
          <td>{{ activity.date }}</td>
          <td>{{ activity.location }}</td>
          <td>
            <button @click="editActivity(activity)">编辑</button>
            <button @click="deleteActivity(activity.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <!-- 编辑活动模态框 -->
    <div v-if="editingActivity" class="modal">
      <div class="modal-content">
        <h3>编辑活动</h3>
        <form @submit.prevent="saveEdit">
          <div>
            <label>标题:</label>
            <input v-model="editingActivity.title" required>
          </div>
          <div>
            <label>描述:</label>
            <textarea v-model="editingActivity.description" required></textarea>
          </div>
          <div>
            <label>日期:</label>
            <input v-model="editingActivity.date" type="date" required>
          </div>
          <div>
            <label>地点:</label>
            <input v-model="editingActivity.location" required>
          </div>
          <button type="submit">保存</button>
          <button type="button" @click="cancelEdit">取消</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import activitiesData from '../data/activities'

export default {
  data() {
    return {
      activities: [...activitiesData],
      showAddForm: false,
      newActivity: {
        title: '',
        description: '',
        date: '',
        location: ''
      },
      editingActivity: null
    }
  },
  methods: {
    addActivity() {
      const newId = Math.max(...this.activities.map(a => a.id)) + 1
      this.activities.push({
        id: newId,
        ...this.newActivity
      })
      this.resetNewActivity()
      this.showAddForm = false
    },
    cancelAdd() {
      this.resetNewActivity()
      this.showAddForm = false
    },
    resetNewActivity() {
      this.newActivity = {
        title: '',
        description: '',
        date: '',
        location: ''
      }
    },
    editActivity(activity) {
      this.editingActivity = { ...activity }
    },
    saveEdit() {
      const index = this.activities.findIndex(a => a.id === this.editingActivity.id)
      if (index !== -1) {
        this.activities.splice(index, 1, this.editingActivity)
      }
      this.editingActivity = null
    },
    cancelEdit() {
      this.editingActivity = null
    },
    deleteActivity(id) {
      if (confirm('确定要删除这个活动吗？')) {
        this.activities = this.activities.filter(a => a.id !== id)
      }
    }
  }
}
</script>

<style scoped>
.management {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

button {
  margin-right: 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.form-container, .modal {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 500px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin: 5px 0 15px;
  box-sizing: border-box;
}

textarea {
  height: 100px;
}
</style>